<template>
    <div class="store_wrap" v-loading="over">
        <div class="store_wrap_header">
            店铺主页
        </div>
        <div class="store_note">
            <p>{{store_info.description}}</p>
        </div>
        <div class="store_name">
            <div class="logo" @click="handleStore">
                <img v-if="store_info.shop_logo" :src="store_info.shop_logo"/>
            </div>
            <div class="store_name_contain">
                <p>{{store_info.shop_name}}</p>
                <p>在售商品{{sale_sum}}</p>
            </div>
        </div>
        <div class="store_shop">
            <list @on-handle-addCar="handleAddCar"></list>
        </div>
        <bottom :user_id="store_info.user_id" :shop_id="id" :car_num="car_num"></bottom>
        <div class="store_info">
            <el-dialog
                    title="服务和隐私条款"
                    :visible.sync="info"
                    width="90%"
                    top="30vh"
            >
                <div>
                    <div class="store_name">
                        <div class="logo">
                            <img v-if="store_info.shop_logo" :src="store_info.shop_logo"/>
                        </div>
                        <div class="store_name_contain">
                            <p>{{store_info.shop_name}}</p>
                            <p>在售商品{{sale_sum}}</p>
                        </div>
                    </div>
                    <div class="synopsis">
                        <div class="title">
                            <span>
                                <i class="el-icon-minus"></i>
                            </span>
                            <p>店铺简介</p>
                            <span>
                                <i class="el-icon-minus"></i>
                            </span>
                        </div>
                        <p>
                            {{store_info.shop_poster}}
                        </p>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <i class="el-icon-circle-close" @click="info = false"></i>
                </span>
            </el-dialog>
        </div>
        <div v-if="select_sku">
            <div class="select_dialog_bg" @click="handleCancel"></div>
            <select_sku :goodInfo="select_sku_info" :cocResult="coc_result" @on-handle-cancel="handleCancel"></select_sku>
        </div>
    </div>
</template>

<script>
    import bottom from '../../components/nav_bottom'
    import list from '../../components/shop_list'
    import http from '../../libs/http'
    import select_sku from '../../components/select_sku'
    import { getToken} from "../../libs/http";
    const token = getToken()
    // import {mapState} from "vuex";
    export default {
        name: 'index',
        components:{bottom,list,select_sku},
        data(){
            return{
                token,
                id:'',
                info:false,
                store_info:{},
                sale_sum:0,
                select_sku:false,
                select_sku_info:{},
                coc_result:0,
                car_num:0,
                over:true
            }
        },
        /*computed:{
            ...mapState({
                shopId: state => state.goods.shopId,
                otherGoods: state => state.goods.otherGoods
            }),
        },*/
        created() {
            this.getParams()
        },
        mounted(){
            if(sessionStorage.getItem('shopId')){
                this.apiGet('api/shop/info/' + sessionStorage.getItem('shopId')).then((res)=>{
                    console.log(res)
                    this.store_info= res
                    if(res){
                        this.over = false
                    }
                })
                this.apiGet('api/goods/paginate?shop_id=' + sessionStorage.getItem('shopId')).then((res) => {
                    if(res){
                        this.sale_sum = res.data.length;
                    }
                });
                this.handleCarNum()
            }
        },
        methods:{
            getParams() {
                // 取到路由带过来的参数
                this.id = this.$route.query.id;
            },
            handleCarNum(){
                if(this.token && sessionStorage.getItem('shopId')){
                    this.apiGet('api/cart?shop_id=' + sessionStorage.getItem('shopId')).then((res) => {
                        console.log(res);
                        if (res.length > 0) {
                            this.car_num = res.length
                        }
                    });
                }
            },
            handleStore(){
                this.info = true;
            },
            handleAddCar(data,show,coc){
                this.select_sku_info = data;
                this.select_sku = show;
                this.coc_result = coc;
            },
            handleCancel() {
                this.select_sku = false
                this.handleCarNum()
            },
        },
        mixins: [http]

    }
</script>

<style lang="stylus">
    add(a)
        a/2
    .store_wrap
        width: 100%;
        height: 100%;
        background: #F7F7F7;
        text-align left
        padding-bottom 70px
        position relative
        .store_wrap_header
            height: 44px;
            font-size:16px;
            text-align: center;
            line-height: 44px;
            color:rgba(77,77,77,1);
            background: #fff;
        .store_note
            width: 100%;
            height: 21px;
            font-size:12px;
            font-weight: 100;
            line-height: 21px;
            padding-left: 8px;
            background: #FEF9E5;
            color:rgba(242,130,46,1);
            p
                white-space: nowrap;
                animation:mymove 10s linear 1s infinite;
            @keyframes mymove
                from {transform:translateX(0)}
                to {transform:translateX(-100%)}
        .store_name
            display: flex;
            background: #fff;
            padding: add(2px) 0 add(35px) add(44px);
            .logo
                align-self: center;
                img
                    width:add(128px);
                    height:add(128px);
                    border-radius:50%;
                    margin-right: add(45px);
            .store_name_contain
                p:nth-child(1)
                    font-weight:bold;
                    font-size:add(36px);
                    color:rgba(0,0,0,1);
                    margin-top: add(37px);
                    line-height: add(36px);
                    margin-bottom: add(19px);
                p:nth-child(2)
                    font-size:add(24px);
                    color:rgba(204,204,204,1);
        .store_shop
            background: #F7F7F7;
            padding: add(9px) 0 0 add(40px);


        .store_info
            .el-dialog__wrapper
                .el-dialog

                    border-radius:10px;
                    .el-dialog__header
                        display none
                    .el-dialog__body
                        padding 22px 28px 22px 37px
                        .store_name
                            padding 0 0 9px 0
                        .synopsis
                            .title
                                display flex
                                padding-bottom 9px
                                justify-content center
                                color:rgba(153,153,153,1);
                                span
                                    align-self center
                                    i
                                        font-size:30px;
                                p
                                    font-size:15px;
                                    align-self center
                                    padding  0 9px
                            p
                                font-size:14px;
                                color:rgba(153,153,153,1);
                                line-height:18px;

                    .el-dialog__footer
                        padding 0
                        position absolute;
                        left 50%;
                        bottom -44px;
                        transform translateX(-50%)
                        i
                            color white
                            font-size 28px
        .select_dialog_bg
            position fixed
            top: 0;
            left 0;
            right 0
            bottom 0;
            width 100%;
            height 100%;
            overflow hidden
            background-color rgba(0, 0, 0, .5);
</style>
